<template>
  <div class="recharge box-border">
    <assets-head :title="$t('充值通道')">
      <img
        src="../../assets/image/assets-center/exchange.png"
        alt="exchange-img"
        class="w-44 h-38"
        @click="goRouter('/assetsCenter/rechargeWithdrawRecord?back=1')"
      />
    </assets-head>
    <div class="pl-36 pr-36">
      <div class="recharge-title font-35 textColor">
        {{ $t("请选择充值币种") }}
      </div>
      <div class="recharge-list flex justify-between">
        <div
          class="item-view flex flex-col items-center justify-center text-center w-189 h-220 box-border"
          @click="selectSymbol('usdt')"
        >
          <img src="../../assets/image/symbol/usdt.png" class="w-92 h-92" />
          <div class="text-grey font-26 mt-32">{{ $t("USDT充值") }}</div>
        </div>
        <div
          class="item-view flex flex-col items-center justify-center text-center w-189 h-220 box-border"
          @click="selectSymbol('btc')"
        >
          <img src="../../assets/image/symbol/btc.png" class="w-92 h-92" />
          <div class="text-grey font-26 mt-32">{{ $t("BTC充值") }}</div>
        </div>
        <div
          class="item-view flex flex-col items-center justify-center text-center w-189 h-220 box-border"
          @click="selectSymbol('eth')"
        >
          <img src="../../assets/image/symbol/eth.png" class="w-92 h-92" />
          <div class="text-grey font-26 mt-32">{{ $t("ETH充值") }}</div>
        </div>
      </div>
    </div>
    <div class="textColor mt-40">
      <div
        class="pl-36 pr-36 h-90 lh-90 border-b-color flex justify-between"
        v-for="(item, index) in list"
        :key="index"
        @click="toPath(item.url)"
      >
        <div class="flex items-center">
          <img :src="item.imgPath" class="w-44 h-44 rounded-full mr-20" />
          <span class="textColor1"
            >{{ item.name }} {{ $t("官方充值通道") }}</span
          >
        </div>
        <div>
          <van-icon class="textColor1" name="arrow" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import assetsHead from "@/components/assets-head";
import { Icon } from "vant";
export default {
  name: "rechageList",
  components: {
    assetsHead,
    [Icon.name]: Icon,
  },
  data() {
    return {
      list: [
        {
          name: "Huobi",
          url: "https://www.huobi.com/en-us/",
          imgPath: require("../../assets/image/huobi.png"),
        },
        {
          name: "Binance",
          url: "https://www.binance.com/en",
          imgPath: require("../../assets/image/bian.png"),
        },
        {
          name: "Coinbase",
          url: "https://www.coinbase.com/",
          imgPath: require("../../assets/image/coinbase.png"),
        },
        {
          name: "Crypto",
          url: "https://www.crypto.com/",
          imgPath: require("../../assets/image/crypto.png"),
        },
      ],
    };
  },
  created() {},
  methods: {
    toPath(url) {
      const a = document.createElement("a");
      a.href = url;
      a.target = "_bank";
      document.body.append(a);
      a.click();
      document.body.removeChild(a);
      // if (navigator.userAgent.search('Html5Plus') != -1) {
      //     plus.runtime.openURL(url)
      // } else {
      //     window.open(url)
      // }
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    selectSymbol(symbol) {
      this.$router.push({
        path: "/recharge/rechargePage",
        query: {
          symbol: symbol,
        },
      });
    },
    goRouter(params) {
      this.$router.push({
        path: params,
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.recharge {
  width: 100%;
  box-sizing: border-box;
}

.recharge-title {
  margin: 86px 0 104px 0;
}

.recharge-list > div {
  @include themify() {
    border: 2px solid themed("bg_dark");
  }

  border-radius: 15px;
  box-sizing: border-box;
}
</style>
